<template>
  <div class="chooseGoods" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="商品列表" background-color="linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%)"></myHead>
    <div class="wrap">
      <div class="box" v-for="(item,index) in list"  @click="check(index)">
        <div class="checkbox">
          <input type="checkbox" checked="item.checked" name="goods" value="" hidden />
          <img v-if="item.checked" src="../../../static/img/xuanzhong.png" alt="">
          <img v-else src="../../../static/img/gou.png" alt="">
        </div>
        <div class="box_top">
          <div class="left">
            <div class="img">
              <img src="../../../static/img/tianquan.png" alt="">
            </div>
          </div>
          <div class="right">
            <div class="name">BABYHOST 五一周新款 砂锅黄焖 鸡+茄子</div>
            <div class="time">上架时间：2016-07-15 14:00</div>
            <div class="sale">
              <div class="number">已售：2153</div>
              <div class="stock">库存：14755</div>
            </div>
            <div class="price">¥1999.00</div>
          </div>
        </div>
      </div>
    </div>
    <div class="save" @click="save()">确定</div>
  </div>
</template>

<script>
  import myHead from "../../components/BusinessComponents/lib/myHead";
  import Vue from 'vue';
  import { Checkbox, CheckboxGroup } from 'vant';

  Vue.use(Checkbox);
  Vue.use(CheckboxGroup);

  export default {
      name: "chooseGoods",
      components: {
        myHead
      },
      data() {
        return {
          title:"商品管理",
          typeId:false,
          list:[{
            data:{
              id:0
            },
            checked:false
          },{
            data:{
              id:1
            },
            checked:false
          }],
          arr:[],
        }
      },
    methods: {
      back() {
        this.$router.back();
      },
      check(index){
        if(this.list[index].checked){
          this.list[index].checked = false
        }else{
          this.list[index].checked = true
        }
      },
      save(){
        let arr = [];
        for(let i=0;i<this.list.length;i++){
          if(this.list[i].checked){
            arr.push(this.list[i].data.id)
          }
        }
        this.arr = arr;
        bus.$emit('goods', {
          arr
        });
        this.$router.back();
        bus.$off('goods',this.arr);
      }
    },
    mounted() {

    },
    destroyed() {
        // bus.$off('goods',this.arr);
    },
    watch:{
        // page(){
        //   console.log(this.page)
        // }
    }
  }
</script>

<style scoped>
  .chooseGoods{
    padding-top: .56rem;
  }

  /* 商品列表部分 */
  .chooseGoods .box {
    padding: 0.05rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .chooseGoods .box .checkbox{
    width: .24rem;
    height: .24rem;
  }
  .chooseGoods .box_top{
    display: flex;
    justify-content: space-between;
  }
  .chooseGoods .left{
    width: 1rem;
    margin-right: .1rem;
  }
  .chooseGoods .right{
    flex-grow: 1;
  }
  .chooseGoods .name{
    font-size: .15rem;
    width: 1.8rem;
    line-height: .18rem;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: .18rem;
    color: #333333;
  }
  .chooseGoods .sale{
    display: flex;
    font-size: .13rem;
    color: #999999;
  }
  .chooseGoods .number{
    margin-right: .3rem;
  }
  .chooseGoods .time{
    font-size: .13rem;
    color: #999999;
    margin: .08rem 0 .08rem;
  }
  .chooseGoods .price{
    color: #FB4448;
    font-size: .18rem;
    margin: .04rem 0;
  }
  .chooseGoods .save{
    height: .48rem;
    background: linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
    line-height: 0.48rem;
    text-align: center;
    font-size: .14rem;
    color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
</style>
